<!-- 侧边栏 子组件 -->
<template>
  <div>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
           <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button> 
                                      </el-radio-group>-->

    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse" background-color="rgb(50, 65, 87)" text-color="#fff" active-text-color="#ffd04b">

      <h3>{{ isCollapse ? "CRM" : "婉舒CRM系统" }}</h3>
      <!-- 没有二级菜单 -->
      <el-menu-item v-for="item in noChildren" :key="item.menuId" :index="item.menuId+''" @click="clickMenu(item)">
        <!-- 图标，以下两种方式都可以 -->
        <!-- <i :class="`el-icon-${item.icon}`" ></i> -->
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{ item.label}} </span>
      </el-menu-item>

      <!-- 有二级菜单 -->
      <el-submenu v-for="item in hasChildren" :key="item.menuId" :index="item.menuId+''">
        <!-- 一级菜单 -->
        <template slot="title">
          <i :class="'el-icon-' + item.icon"></i>
          <span slot="title">{{ item.label }}</span>
        </template>
        <el-menu-item-group>
          <!-- 二级菜单 -->
          <el-menu-item v-for="children in item.children" :key="children.menuId" :index="children.menuId+''"
            @click="clickMenu(children)">{{ children.label}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </div>
</template>
<style lang="less" scoped>
/* 疑问：这里是class选择器的话，没有对应的<element class="el-menu"> 但是却对 <el-menu>标签有效。
  猜测:ElementUI 的标签 都默认有一个与标签同名的class
  */
.el-menu {
  height: 100vh;
  border-right: none;

  // Less 的嵌套使用方式
  h3 {
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 22px;
    font-weight: 400;
    margin: 0 20px;
  }

}
</style>

<script>
export default {
  /**
   * 为了避免报下面的错误，这里名称改为大写开头
   * 错误：Do not use built-in or reserved HTML elements as component id: aside
   */
  name: "Aside",
  data() {
    return {
      //isCollapse: false, //左侧菜单是否折叠 默认：否  改为手动控制VUEX里的状态，不需要这个数据了
      menuData: [
      //菜单类似如下格式 其中url没发现有什么用
      // {
      //     "path": "/",
      //     "name": "firstPage",
      //     "label": "首页",
      //     "icon": "s-home",
      //     "url": "Home/Home"
      //   },
      //   {
      //     "label": "客户管理",
      //     "icon": "user",
      //     "name": "customer",
      //     "children": [
      //       {
      //         "path": "/CustomerList",
      //         "name": "customerList",
      //         "label": "客户列表",
      //         "icon": "setting",
      //         "url": "customer/customerList"
      //       },
      //       {
      //         "path": "/CommonCustomer",
      //         "name": "commonCustomer",
      //         "label": "公海客户",
      //         "icon": "setting",
      //         "url": "customer/CommonCustomer"
      //       }
      //     ]
      //   }
      ]
    };
  },
  methods: {
    // elementUI 展开二级菜单时触发
    handleOpen(key, keyPath) {
      console.log("展开菜单：" + key, keyPath);
    },
    // elementUI 合并二级菜单时触发
    handleClose(key, keyPath) {
      console.log("合并菜单：" + key, keyPath);
    },
    //method的第二种写法与上面的效果一样
    //点击菜单（一级或二级菜单）
    clickMenu: function (item) {
      //console.info("当前路径：", this.$route.path)
      console.info("点击菜单：" + item.path, item)
      //console.info("this=", this)
      //console.info("this.$router=", this.$router)

      //获得路由器，并使出口指向指定path
      /**
       * 连续两次点击(非双击)同一个菜单会报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/FirstPage".
       * 解决： 1、目标与当前路径相同则不跳转。
       *        2、因为有主页重定向，当前路径从“/FirstPage”跳转到“/”时不需跳转。
       */
      if (this.$route.path != item.path && !(this.$route.path === "/FirstPage" && item.path === "/")) {
        this.$router.push(item.path);
      }
      //关于路由和路由器的 扩展学习：
      //this.$router.go(-1) // 后退
      //push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面。
      // 一般使用replace来做404页面,
      //this.$router.replace('/')
      /** 路由实例 */
      //获取路由实例的参数
      //this.$route.params.userId
      //一个key/value 对象，表示 URL 查询参数。例如，对于路径/foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
      //this.$route.query
      //字符串，对应当前路由的路径，总是解析为绝对路径，如 /foo/bar。
      //this.$route.path
      //一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
      // this. $route.matched
      /**路由是：/path/:type
       * 真正路径是：/path/list
       * path匹配路径: /path/list
       * fullPath匹配路由: /path/:type 
       * */
      //$route.fullPath
      //$route.meta (路由原信息meta)

      //触发面包屑数据更新
      this.$store.commit("changeMenu", item);
    },
    // 处理 菜单初始化
    handleInitMenuData() {
      //this.menuData = [];
      //请求查询用户菜单数据
      this.$http.get("/sys/sysMenu/getUserMenus").then((res) => {
        console.log("查询用户菜单数据", res);
        this.menuData = res.data.data;  //菜单数据
      }).catch(function (error) {
        console.log(error);
      })
    }
  },
  //渲染完成后执行
  mounted() {
    this.handleInitMenuData();
  },
  //计算，返回指定的数据可以直接在视图中使用
  computed: {
    //过滤出包含子菜单的菜单数据
    hasChildren: function () {
      return this.menuData.filter(item => item.children&&item.children.length>0);
    },
    //过滤出不包含子菜单的菜单数据
    noChildren: function () {
      return this.menuData.filter(item => (!item.children||item.children.length==0));
    },
    //获取从Vuex.store库中得到的跨组件状态数据isCollapse
    isCollapse() {
      console.log("获取从Vuex.store库中得到的跨组件状态数据isCollapse")
      //响应式的，只要src\store\tab.js中的 state.tab.isCollapse改变，这里就会及时获取
      return this.$store.state.tab.isCollapse;
    }
  }
}
</script>